JS - Element properties

element.innerText or node.innerText: returns the text content of an element or node.

element.innerText = text or node.innerText = text: sets the text content of an element or node.

The text content of the button element is:

code:

                <div>
                    <button id="Btn" type="button">try it</button>
                    <p>The text content of the button element is: <span id="prop"></span></p>
                </div>
                <script>
                    let text = document.getElementById("Btn").innerText;
                    document.getElementById("prop").innerHTML = text;  
                </script>

This element has extra spacing and contains a span element.

            <div>
                <p id="prop1">   This element has extra spacing   and contains <span>a span element</span>.
                </p>
    
                <button onclick="getinnerHTML()">Get innerHTML</button>
                <button onclick="getinnerText()">Get innerText</button>
                <button onclick="gettextContent()">Get textContent</button>
                
                <pre id="prop2"></pre>
                
            </div>
            <script>
                function getinnerText() {
                    let text = document.getElementById("prop1").innerText;
                    document.getElementById("prop2").innerText = text;
                }
    
                function getinnerHTML() {
                    let text = document.getElementById("prop1").innerHTML;
                    document.getElementById("prop2").innerText = text;
                }
    
                function gettextContent() {
                    let text = document.getElementById("prop1").textContent;
                    document.getElementById("prop2").innerText = text;
                }
            </script>

JS - element properties - innerText

sets or returns the text content of a node and its descendants.